<template>
    <div>
        <div class="login-content">
            <div class="banner">
                <el-image
                    :src="bannerUrl">
                </el-image>
            </div>
            <div class="login">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.2rem" :show-message="false"
                        :label-position="'left'" class="form" :hide-required-asterisk="true">
                    <el-form-item label="手机号" prop="phone">
                        <el-input placeholder="请输入手机号" v-model="ruleForm.phone" type="tel"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input placeholder="请输入验证码" v-model="ruleForm.code">
                            <el-button slot="append" class="code-btn" type="text" :disabled="show">
                                <span v-show="!show" @click="sendCode">发送验证码</span>
                                <span v-show="show">
                                    <countdown v-model="time" @on-finish="finish" :start="start"></countdown>s
                                </span>
                            </el-button>
                        </el-input>
                    </el-form-item>
                    <p>注：每个手机号码每天最多发送5次验证码</p>
                </el-form>
                <el-button type="primary" class="submit" @click="submitForm('ruleForm')">登录</el-button>
            </div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import banner from '../../static/images/banner.png'
    import comButtom from './buttom'
    import {Countdown} from 'vux'

    export default {
        data() {
            return {
                bannerUrl: banner,
                ruleForm: {
                    phone: '',
                    code: ''
                },
                rules: {
                    phone: [
                        {required: true, message: '', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '', trigger: 'blur'}
                    ]
                },
                show: false,
                time: 60,
                start: false
            }
        },
        mounted() {
        },
        methods: {
            finish(index) {
                // index 倒计时结束次数
                this.show = false
                this.start = false
                this.time = 60
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text('请填写完整信息', 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/login/confirm?phone=' + this.ruleForm.phone + '&smsCode=' + this.ruleForm.code).then(result => {
                        if (result.success) {
                            this.$store.commit('SET_USER', {name: ''})
                            this.$nextTick(() => {
                                this.$router.push('/home')
                                this.finish()
                            })
                        }
                    })
                })
            },
            sendCode() {
                this.$refs.ruleForm.validateField('phone', (msg) => {
                    if (msg) {
                        this.$vux.toast.text('请输入手机号', 'middle')
                    } else {
                        this.$http.post('/login/smsCode?phone=' + this.ruleForm.phone).then(result => {
                            if (result.success) {
                                if (result.data) {
                                    this.$vux.alert.show({
                                        content: result.data
                                    })
                                }
                                this.show = true
                                this.start = true
                            }
                        })
                    }
                })
            }
        },
        components: {
            Countdown,
            comButtom
        }
    }
</script>

<style scoped lang="less">
    .login-content {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .banner {
            /*height: 3rem;*/
            overflow: hidden;
            /*padding: .2rem 0;*/

            .el-image {
                height: 100%;
            }
        }

        /deep/ .login {
            padding: 10%;

            .el-form {
                .el-form-item {
                    border-bottom: 1px solid #999;
                    margin-bottom: .2rem;
                }
            }

            .el-input {
                input {
                    border: 0 none;
                }
            }

            .el-input-group__append {
                border: 0 none;
                background-color: transparent;
            }

            .code-btn {
                color: #409EFF;

                &.is-disabled {
                    color: #999;
                }
            }

            .submit {
                display: block;
                width: 80%;
                margin: 0 auto;
                margin-top: .5rem;
            }
        }
    }
</style>
